<!--
 * @Description: 
 * @Autor: ZachGmy
 * @Date: 2021-06-25 14:34:47
 * @LastEditors: ZachGmy
 * @LastEditTime: 2021-06-25 15:25:30
-->
<template>
  <div>
    <!-- get无参 点击按钮 获取历史上的今天的数据 并且简单显示一下 -->
    <!-- <button @click="getTodHis">历史上的今天</button>
    <div v-for="(item, index) in todHisArr" :key="index">
      {{ index + 1 }} - {{ item.title }}
    </div> -->

    <!-- get有参 输入一个物品的名称 查询是什么垃圾 将垃圾种类进行一个现实 -->
    <!-- 请输入您要查询的物品：<input
      type="text"
      @keyup.enter="queryRubType"
      v-model="rubName"
    />
    <div>您查询的物品种类是:{{ rubType }}</div> -->

    <!-- post有参 查询天气 -->
    <button @click="getWeather">查询天气</button>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
// 引入qs
import qs from "qs";
export default {
  data() {
    return {
      // 历史上的今天数组
      todHisArr: [],
      // 物品/垃圾名称
      rubName: "",
      // 垃圾种类
      rubType: "",
    };
  },
  methods: {
    // 获取今日的天气
    getTodHis() {
      // 直接发送网络请求
      axios({
        // 接口地址
        url: "https://api.muxiaoguo.cn/api/lishijr",
      }).then((res) => {
        // 通过网络请求拿到了我们需要的数据 res.data.data
        // 将数据赋值给data中定义好的数组
        this.todHisArr = res.data.data;
      });
    },
    // 获取垃圾的种类
    queryRubType() {
      axios({
        // 接口地址
        // 直接将参数拼接到url的后面
        url: "https://api.muxiaoguo.cn/api/lajifl?m=" + this.rubName,
        // 请求方式
        method: "get",
      }).then((res) => {
        // 给定义好的变量进行一个赋值操作
        this.rubType = res.data.data.Type;
      });
    },
    // 查询天气
    getWeather() {
      axios({
        url: "https://api.muxiaoguo.cn/api/tianqi",
        method: "post",
        data: qs.stringify({
          city: "柳州",
          type: 1,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      }).then((r) => {
        console.log("post有参", r);
      });
    },
  },
};
</script>

<style scoped>
</style>